<template>
  <div>
    <!-- 查询表单区域 -->
	<!-- 搜索框 -->
	<el-card class="box-card card-toubu" shadow="never">
	  <div class="text item">
	    <i class="el-icon-search"></i>&nbsp;
	    <span>筛选搜索</span>
	    <br />
	    <br />
		<el-form :inline="true" :model="querySpu" class="demo-form-inline">
		  <el-form-item label="商品名称">
			<el-input
			  v-model="querySpu.name"
			  placeholder="请输入商品名称"
			></el-input>
		  </el-form-item>
		  <el-form-item label="商品分类">
			<el-cascader
			  clearable
			  v-model="value"
			  :options="categories"
			  @change="handleChange(value)"
			></el-cascader>
		  </el-form-item>
		  <el-form-item label="商品品牌">
			<el-select
			  v-model="querySpu.brandId"
			  placeholder="请选择商品品牌"
			  clearable
			>
			  <el-option
				v-for="item in brands"
				:key="item.id"
				:label="item.name"
				:value="item.id"
			  >
			  </el-option>
			</el-select>
		  </el-form-item>
		  <el-form-item>
			<el-button type="primary" @click="onSubmit">查询</el-button>
		  </el-form-item>
		</el-form>
	  </div>
	</el-card>
	<el-card class="box-card card-toubu" shadow="never">
	  <div class="text item">
	    <i class="el-icon-tickets"></i>&nbsp;
	    <span>数据列表</span>
	  </div>
	</el-card>
    <!-- 表格区域 -->
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column label="编号" prop="id"></el-table-column>
      <el-table-column label="商品图片" width="200">
        <template slot-scope="scope">
          <img :src="scope.row.image" width="150px" height="150px" />
        </template>
      </el-table-column>
      <el-table-column label="商品名称">
        <template slot-scope="scope">
          <span v-for="(a,b) in scope.row.name.split(' ')" :key="b">
            <p v-if="b == 0">
              {{a}}
            </p>
          </span>
          <span>品牌: {{ scope.row.brandName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="货号">
        <template slot-scope="scope"> 货号：{{ scope.row.psn }} </template>
      </el-table-column>
      <el-table-column label="标签">
        <template slot-scope="scope">
          <span v-if="scope.row.pmarketable === 1">上架：</span>
          <span v-else>下架：</span>
          <el-switch
            v-model="scope.row.pmarketable"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
            @change="offShelfSpu(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="销量" prop="saleNum"></el-table-column>
      <el-table-column label="审核状态">
        <template slot-scope="scope">
          <span v-if="scope.row.pstatus === 1">已审核</span>
          <span v-else>未审核</span><br />
          <el-button v-if="scope.row.pstatus === 1"
            size="mini"
            type="primary"
            @click="handleAudit(scope.row.id)"
            >审核详情</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="操作" align="right">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleQuery(scope.row)"
            >查看</el-button
          >
          <el-button size="mini" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页控件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
	<!-- 审核列表 -->
	<el-dialog
	  title="审核详情"
	  :visible.sync="dialogVisible">
	  <el-table
	        :data="auditInfo"
	        style="width: 100%">
	        <el-table-column
	          prop="auditTime"
	          label="审核时间"
	          width="180">
	        </el-table-column>
	        <el-table-column
	          prop="auditName"
	          label="审核人员"
	          width="180">
	        </el-table-column>
	        <el-table-column
	          prop="audit"
	          label="审核结果">
	        </el-table-column>
	        <el-table-column
	          prop="message"
	          label="反馈详情">
	        </el-table-column>
	      </el-table>
	</el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 数据接收数组
      tableData: [],
      // 总行数
      total: 0,
      // 选择显示每页多少数据数组
      pageSizes: [10, 20, 30, 40],
      // 页号
      currentPage: 1,
      // 页大小
      pageSize: 10,
      // 品牌名称
      brandName: "",
      // 查询条件
      querySpu: {},
      // 商品品牌
      brands: [],
      // 商品分类
      categories: [],
      // 商品分类数组值
      value: [],
	  // 审核日志列表
	  auditInfo: [],
	  // 审核详情对话框
	  dialogVisible: false
    };
  },
  methods: {
    // 初始化数据方法
    async getSpu() {
      const { data: res } = await this.$http.post(
        `vi/goods/spu/selectSpuAndSkuIsDelete/${this.currentPage}/${this.pageSize}`,
        this.querySpu
      );
      this.tableData = res.data.pageUtils.rows;
      this.total = res.data.pageUtils.total;
    },
    // 页大小改变方法
    handleSizeChange(val) {
      this.pageSize = val;
      this.getSpu();
    },
    // 页号改变方法
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getSpu();
    },
    // 初始化商品品牌列表
    async getBrand() {
      const { data: res } = await this.$http.get("vi/goods/brand/list");
      this.brands = res.data.list;
    },
    // 初始化商品分类
    async getCategory() {
      const { data: res } = await this.$http.get(
        "vi/goods/category/queryAllCategory"
      );
      this.categories = res.data.maps;
    },
    // 条件查询提交
    onSubmit() {
      this.getSpu();
    },
    handleChange(value) {
      this.querySpu.category3Id = value[value.length - 1];
    },
    // 逻辑删除商品信息
    handleDelete(row) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          if (row.pmarketable == 1) {
            this.$message.error("当前商品为上架商品，不能删除，请先下架！")
            return false
          }
          const { data: res } = await this.$http.delete(
            `vi/goods/spu/isDeleteById/${row.id}`
          );
          if (res.code === 2001) {
            this.$message.error(res.message);
          } else {
            this.$message.success(res.message);
            this.getSpu();
          }
          // 刷新页面
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    // 商品下架上架方法
    async offShelfSpu(row) {
      if (row.pmarketable === 0) {
        const { data: res } = await this.$http.get(
          `vi/goods/spu/pull?id=${row.spuId}`
        );
        this.getSpu();
        return this.$message.success(res.message);
      } else {
        const { data: res } = await this.$http.get(
          `vi/goods/spu/put?id=${row.spuId}`
        );
        this.getSpu();
        return this.$message.success(res.message);
      }
    },
	async handleAudit (id) {
		const { data: res } = await this.$http.get(`vi/goods/audit/queryBySkuId/${id}`);
		this.auditInfo = res.data.audit
		this.dialogVisible = true
		// this.$message.info("抱歉，当前功能还未完善")
	},
	handleQuery (row) {
		this.$router.push({ path: '/goods/addOneCategory', query: { spuId: row.spuId, handel: 'query' } })
		// this.$message.info("抱歉，当前功能还未完善")
	},
	handleEdit (row) {
		this.$router.push({ path: '/goods/addOneCategory', query: { spuId: row.spuId, handel: 'edit' } })
		// this.$message.info("抱歉，当前功能还未完善")
	}
  },
  created() {
    this.getSpu();
    this.getBrand();
    this.getCategory();
  }
};
</script>

<style>
.el-table.th,
.el-table.td {
  text-align: center !important;
}
</style>
